<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import Child from './component/Child.vue'
import { myTitle, obj } from './test.js'
const title = ref('我是标题')
const subTitle = ref('我是传递的标题')
const age = ref(0)
const total = ref(0)
const list = ref([])
const isShow = ref(true)
const router = useRouter()

onMounted(() => {
  obj.content = '999'
  console.log(myTitle, obj)
  setTimeout(() => {
    console.log(myTitle)
  }, 5000)
  const url = 'https://xiaoyueyue.com.cn/frontEnd/dataBase/getDataList'
  fetch(url).then(async function (response) {
    const { data } = await response.json()
    list.value = data.result
  })
})

// 监听age变化
watch(age, (n, o) => {
  total.value = n - 0
})

// 切换标题
const changeTitle = () => {
  document.querySelector('#box').innerHTML = '我是新标题'
}
const changeTitle1 = (val) => {
  title.value = '我是新标题'
}
const changeSubTitle = (val) => {
  subTitle.value = val
}

// 切换显隐
const changeVisible = () => {
  isShow.value = !isShow.value
}

// 跳转到详情
const goDetail = (item) => {
  router.push({
    path: '/detail',
    query: {
      id: item._id
    }
  })
}
</script>
<template>
  <div class="p-[10px]">
    <div class="flex py-[10px]">
      <div id="box">{{ title }}</div>
      <div class="pl-[10px]">
        <el-button @click="changeTitle" type="primary" size="small">修改标题</el-button>
      </div>
    </div>
    <div class="flex py-[10px]">
      <div>{{ title }}</div>
      <div class="pl-[10px]">
        <el-button @click="changeTitle1" type="primary" size="small">修改标题</el-button>
      </div>
    </div>
    <div class="p-[8px] border-b flex justify-between" v-for="item in list" :key="item._id">
      <div>{{ item.userName }}</div>
      <div>
        <el-button @click="goDetail(item)" type="primary" size="small">详情</el-button>
      </div>
    </div>
    <div class="flex p-[10px]">
      <div v-show="isShow" class="pr-[10px]">我是内容</div>
      <el-button @click="changeVisible" type="primary" size="small">显隐</el-button>
    </div>
    <div class="p-[10px]">
      <child @change="changeSubTitle" :title="subTitle"></child>
    </div>
    <div>
      <el-slider v-model="total" />
      <el-input v-model="age" placeholder="请输入数字"></el-input>
    </div>
    <div class="gap-x-[30px] p-[10px] flex">
      <div>
        <child>
          <div>我是默认内容</div>
          <template #content>
            <div>我是内容</div>
          </template>
        </child>
      </div>
      <div>
        <child></child>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
